
<template>
  <base-page-view class-name="page-container confirmDetails">
    <view v-if="listData.length>0" class="confirmDetailsContent">
      <view class="confirmDetailsHead">
        <view>合计收益：¥{{ totalAmount | formatMoney }}</view>
      </view>
      <view v-for="(list,index) in listData" :key="index" class="list">
        <view v-for="(goods,index2) in list.goodsItems" :key="index2" class="goods">
          <view class="title" :class="goods.amount>=0?'':'title_pri_del'">{{ goods.title }}</view>
          <view class="goodsRight"><view class="num">*{{ goods.number }}</view> <view>¥{{ goods.amount | formatMoney }}</view></view>
        </view>
        <view class="totalEarnings">总收益 ¥{{list.totalIncome|formatMoney}}</view>
        <view class="c_border"></view>
        <view class="order">
          <view class="details">
            <view>购买人：</view>
            <view>{{ list.buyer }}</view>
          </view>
          <view class="details">
            <view>订单编号：</view>
            <view>{{ list.orderNo }}</view>
          </view>
          <view class="details">
            <view>订单金额：</view>
            <view>¥{{ list.payAmount | formatMoney }}</view>
          </view>
          <view class="details">
            <view>付款时间:</view>
            <view>{{ list.payTime|formatDate }}</view>
          </view>
        </view>
      </view>
    </view>
    <no-more :list="listData" :nomore="nomore"></no-more>
  </base-page-view>
</template>

<script>
import {formatDate} from "@/utils/tools.js"
export default {
  components: {
  },
  data() {
    return {
      pageSize: 10,
      pageNo: 1,
      listData: [],
      totalAmount: '',
      nomore: false,
      orderStatus: 0,
      queryType:"",
      dailyDate:"",
      uniqueNo:""
    }
  },
  created() {
  },
  onLoad(option) {
    this.queryType=option.queryType||'';
    this.dailyDate=option.dailyDate?formatDate(Number(option.dailyDate),'yyyy-MM-dd'):'';
    this.uniqueNo=option.uniqueNo;
    if(this.queryType){
      this.getList()
    }
    this.setTitle();
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.listData = []
    this.nomore = false
    this.getList()
  },
  onReachBottom() {
    if (this.nomore) return
    this.pageNo += 1
    this.getList()
  },
  onShow() {
  },
  methods: {
    setTitle(){
      let title="";
      switch (this.queryType){
        case "ALL":
          title="零售累计收益明细";
          break;
        case "UNSEND":
          title="零售累计未发放收益明细";
          break;
        case "MONTH":
          title="零售本月预估收益明细";
          break;
        case "SENT":
          title=this.dailyDate+"累计已发放明细";
          break;
        default:
          break;
      }
      uni.setNavigationBarTitle({
          title: title
      });
    },
    async getList() {
      const res = await this.$api.gainApi.retail_cumulative_sent({
        userId: this.$store.state.userInfo.uid,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        queryType: this.queryType,
        dailyDate:this.dailyDate,
        uniqueNo:this.uniqueNo
      })
      if (res.code === '000000') {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        this.listData = this.listData.concat(res.data.pageInfo.list)
        this.totalAmount=res.data.totalAmount;
        if (res.data.pageInfo.list.length < this.pageSize) {
          this.nomore = true
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.confirmDetails{
    .confirmDetailsContent{
        .confirmDetailsHead{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            color: #000;
            font-size: 28rpx;
            padding: 24rpx 32rpx;
            font-family:PingFang SC;
        }
        .list{
            padding: 26rpx 44rpx;
            background-color: #fff;
            margin-bottom: 20rpx;
            .goods{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                font-size: 26rpx;
                color: #333;
                height: 60rpx;
                line-height: 60rpx;
                .title{
                    text-overflow:ellipsis;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    overflow: hidden;
                }
                // .title_pri_del{
                //     text-decoration:line-through;
                //     color:#CCCCCC;
                // }
                .goodsRight{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    .num{
                        margin: 0 40rpx 0 20rpx;
                    }
                }
            }
            .title_pri_del{
                text-decoration:line-through;
                color:#CCCCCC;
            }
            .totalEarnings{
                display: flex;
                flex-direction: row;
                justify-content: flex-end ;
                color: #e21536;
                font-size: 26rpx;
            }
            .c_border{
                border-bottom: 2rpx solid #EAEAEA;
                margin: 26rpx 0;
            }
            .order{
                color: #999999;
                font-size: 26rpx;
                .details{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    height: 38rpx;
                    line-height: 38rpx;
                }
            }
        }
    }
    .nomore{
        text-align: center;
        color: #999;
        margin: 20rpx;
    }
    .empty_view{
      @include sub-item;
      margin: 0 auto;
      width: 240rpx;
      height:240rpx;
      margin-top: 35vh;
      .empty_img{
          width: 240rpx;
          height: 240rpx;
      }
      .tit{
          color: #000;
          margin-top: 10rpx;
          text-align: center;
          font-size: 28rpx;
      }
  }
}
</style>